<template>
	<div>
		<view class="image1">
			<image src="/static/ruzhu_process.jpg" mode="widthFix" />
		</view>
		<view class="pickadd">
			<view class="item"><text class="red1">*</text>服务区域</view>
			<view>
				<PickerAddress @change="change">
					{{ warea }}
				</PickerAddress>
			</view>
		</view>
		<!-- 服务品类111111111111111 -->
		<view class="pickadd">
			<view class="item"><text class="red1">*</text>服务品类</view>
			<picker @change="bindPickerChange" :value="wcate" :range="array" range-key="name">{{ wcate }} </picker>
		</view>
		<view class="pickadd1">
			<u-cell-group>
				<u-cell class="item1" size="large" title="服务类型" @click="show = true" :value="wtype" isLink>
					<view slot="title" class="u-slot-title">
						<text class="u-cell-text"><text class="red1">*</text>服务类型</text>
					</view>
				</u-cell>
			</u-cell-group>
		</view>

		<u-popup :show="show" mode="bottom" @close="close" @open="open">
			<view class="u-popup-slot" :style="{
          width: ['bottom', 'top'] ? '750rpx' : '200px',
          marginTop: ['left', 'right'] ? '10rpx' : '200',
        }">
				<text class="text1">选择服务类型</text>
			</view>
			<u-checkbox-group v-model="type" placement="column">
				<u-checkbox :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in checkboxList1" :key="index"
					:label="item.name" :name="item.name">
				</u-checkbox>
			</u-checkbox-group>
			<u-button class="button1" type="primary" @click="wjx()">确认</u-button>
		</u-popup>

		<view class="pickadd">
			<view class="item"><text class="red1">*</text>联系电话：</view>
			<u-input placeholder="请输入电话号码" v-model="wtel"></u-input>
		</view>

		<view>
			<u-button class="button2" type="primary" @click="insert()" size="large" @change="change1" text="完成入驻">
			</u-button>
		</view>
	</div>
</template>

<script>
	import setting from '../../common/setting.js'
	import pickerAddress from '@/components/pickerAddress/pickerAddress.vue'
	import PickerAddress from '@/components/pickerAddress/pickerAddress.vue'

	export default {
		components: {
			pickerAddress,
			PickerAddress,
		},
		created() {
			var username = window.localStorage.getItem('username')
			this.wusername = username
			// console.log(username)
		},
		data() {
			return {
				id: '',
				wusername: '',
				warea: '请选择地区',
				isLink: true,
				show: true,
				showpicker: true,
				array: [{
						name: '定制家具',
					},
					{
						name: '健身器具类',
					},
					{
						name: '窗帘',
					},
					{
						name: '灯具类',
					},
					{
						name: '晾衣架类',
					},
					{
						name: '家电/厨电',
					},
					{
						name: '锁类',
					},
					{
						name: '卫浴类',
					},
					{
						name: '护墙板',
					},
					{
						name: '智能设备',
					},
					{
						name: '广告海报',
					},
					{
						name: '地板类',
					},
					{
						name: '门窗',
					},
					{
						name: '墙纸类',
					},
				],
				wcate: '定制家具',

				wtype: '',
				show: false,
				type: [],
				//电话号码
				wtel: '',

				// 基本案列数据
				checkboxList1: [{
						name: '安装',
						disabled: false,
					},
					{
						name: '维修',
						disabled: false,
					},
					{
						name: '配送',
						disabled: false,
					},
					{
						name: '尺量',
						disabled: false,
					},
					{
						name: '配送+安装',
						disabled: false,
					},
				],
			}
		},
		onLoad() {},
		methods: {
			change(data) {
				this.warea = data.data.join('')
			},
			bindPickerChange: function(e) {
				this.array.forEach((v, i) => {
					if (i == e.detail.value) {
						this.wcate = v.name
					}
				})
				// this.wcate = e.detail.value
				console.log(this.wcate)
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			wjx() {
				let n = 0
				this.type.forEach(item => {
					if (n === 0) {
						this.wtype = item
						n = n + 1
					} else {
						this.wtype = this.wtype + ',' + item
						n = n + 1
					}
				})
				this.show = false
			},
			//电话号码
			change1(e) {
				console.log('change1', e)
			},
			insert() {
				if (this.warea == '' || this.wcate == '' || this.wtype == '' || this.wtel == '') {
					uni.showToast({
						icon: 'error',
						duration: 1500,
						title: '请填写所有内容',
					})
				} else {
					uni.request({
						method: 'post',
						url: setting.url + '/worker/update',
						data: {
							// id: this.id ? this.id : '-1',
							warea: this.warea,
							wcate: '' + this.wcate,
							wtype: this.wtype,
							wtel: this.wtel,
							wusername: this.wusername,

						},
						success: (res) => {
							// console.log(res.data)
							this.$store.commit('changeIsSettle', res.data.data)
							uni.showToast({
								icon: 'success',
								duration: 1500,
								title: '恭喜您完成入驻',
							})

							setTimeout(v => {
								uni.reLaunch({
									url: '../index/index',
								})
							}, 1500)
						},
					})
				}

			},
		},
	}
</script>

<style scoped lang="scss">
	.image1 {
		margin-top: 20px;
		text-align: center;
	}

	.pickadd {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
		border: 1px solid black;
		padding: 17px 0;
	}

	.pickadd1 {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
		border: 1px solid black;
		padding: 2px 0;
	}

	.item {
		padding-left: 10px;
	}

	.item1 {
		padding-left: 0px;
	}

	.text1 {
		display: flex;
		align-items: center;
	}

	.red1 {
		color: red;
	}

	.button1 {
		color: #1d428d;
		width: 400rpx;
	}

	.button2 {
		margin-top: 200px;
		width: 400rpx;
	}

	.u-popup-slot {
		width: 200px;
		height: 30px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	// .u-cell-text{
	// 	text-size-adjust: 45px;
	// }
</style>
